<template>
  <div class="app-container">
<div class="line"></div>
       <el-row >
          <el-col
            style="width: 200px;height: 250px; margin-left: 20px;margin-top: 20px;margin-bottom:80px ;"
            :span="8"
            v-for="(value, key, index) in bookList"
            
            :key="key"
            :offset="index > 0 ? 4 : 0"
          >
            <el-card :body-style="{ padding: '0px' }">
            <router-link :to ="'/books/homrtodetails/' + value.id">
              <img :src='value.image' class="image">
            </router-link>
              <div style="padding: 14px;">
              <el-tag>{{value.bookName}}</el-tag>
              <el-tag type="success">{{ value.bookType }}</el-tag>
                <div class="bottom clearfix">
                <span>作者 :</span>
                  <time class="author">{{ value.author }}</time>
                  <br>
                  <router-link :to="'/addnewchapter/'+ value.id ">
                  <el-button type="text" class="button">去更新</el-button>
                  </router-link>
                  <el-tag type="success" v-if="value.status =='1'">已通过</el-tag>
                  <el-tag type="warning" v-if="value.status =='2'">审批中</el-tag>
                  <el-tag type="danger" v-if="value.status =='3'">审批失败</el-tag>
                  </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
 
  </div>
</template>
<script>
//引入调用headlineShow.js文件
import newchapterApi from "@/api/newchapterApi";
export default {
  data() {
    return {
        activeIndex: '1',
        activeIndex2: '1',
        bookList:{}

    };
  },
  mounted() {
       this.getnewchapterInfo();
    },
  methods: {

        removeToBookshelf(id){       
        newchapterApi.removeToBookshelf(id).then((response) => {
              this.$message({
              type: "success",
              message: "成功从书架移除!",
            });
            this.getbookshelfInfo();
      })
      },
      handleSelect(key, keyPath) {
        if(key=="all"){
          this.getbooksInfo();
        }else{
          console.log(key, keyPath);
          this.getbooksInfoByType(key);}
        
      },

      getnewchapterInfo(){
        newchapterApi.getnewchapterInfo().then((response) => {
        console.log(response);
        this.bookList = response.data.list;
        console.log(this.bookList);
      })
      }

  },
};

</script>
<style scoped>

.image {
  
  width: 100%;
  height: 200px;
  display: block;
}


</style>